<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>19-页面加载事件</title>
  </head>
  <body>
    <button>1</button>

    <script>
      // 1. 页面加载事件 load  等待所有的外部资源加载完毕 触发 包括图片、外部的CSS等
      window.addEventListener('load', function () {
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
          alert('我被点击了')
        })
        console.log('全部资源加载完毕')
      })

      // 2.页面加载事件 DOMContentLoaded HTML 文档被完全加载和解析完成之后就触发，而无需等待样式表、图像等完全加载
      document.addEventListener('DOMContentLoaded', function () {
        console.log('HTML文档加载完毕DOM')
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
          alert('我被点击了')
        })
      })
    </script>
  </body>
</html>
